<template>
  <div>

    <!-- 模糊搜索 -->
    <el-card style="height: 50px" :body-style="{ padding: '10px', height: '10px' }">
      <div class="box-card-div">
        <el-form :inline="true" :model="userDTO" ref="userForm" class="demo-form-inline">
          <el-form-item label="用户名" prop="username">
            <el-input size="small" v-model="userDTO.username" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select style="width: 100px" size="small" v-model="userDTO.sex" placeholder="性别">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间" prop="createTime1">
            <el-date-picker style="width: 130px" v-model="userDTO.createTime1" type="date" size="small"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          -
          <el-form-item prop="createTime2">
            <el-date-picker style="width: 130px" v-model="userDTO.createTime2" type="date" size="small"
                            placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="success" round size="small" @click="onSearch">查询</el-button>
            <el-button type="warning" round size="small" @click="resetEditForm('userForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>


    <!-- 添加、批量删除用户 -->
    <el-card style="height: 60px;" :body-style="{ padding: '10px', height: '20px' }">
      <!-- 添加用户 -->
      <el-button size="medium" type="primary" @click="handleAddUser"
                 icon="el-icon-plus">添加用户
      </el-button>
      <!-- 批量删除用户 -->
      <el-button size="medium" type="danger" icon="el-icon-delete" @click="deleteBatch">
        批量删除
      </el-button>
      <!-- 添加/更新用户对话框 -->
      <el-dialog :title="title" style="margin-left:300px;width: 1000px" :visible.sync="editUserDialog"
                 :close-on-click-modal="false">
        <el-form :model="user" label-width="80px" :rules="rules" ref="userForm">
          <el-form-item label="用户名" prop="username">
            <el-input size="small" style="width: 300px" v-model="user.username"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input size="small" style="width: 300px" show-password v-model="user.password"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input size="small" style="width: 300px" v-model="user.phone"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="余额" prop="money">
            <el-input size="small" style="width: 300px" v-model="user.money"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model.number="user.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="日期" prop="createTime">
            <el-date-picker v-model="user.createTime" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetEditForm('userForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="saveUser('userForm')" size="small">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>



    <!-- 查询所有用户信息、删除、编辑用户信息
     这里需要使用elementui中的表格标签
     还是一样，将表格标签放到el-card标签里面 -->
    <div style="padding: 20px;">
      <!--:data 是绑定下方的数据,从后端查出的-->
      <el-table :data="tableData" border style="width: 100%; border: 5px;" @selection-change="handleSelectionChange">
        <!-- 在这里多添加一列，表示复选框 -->
        <el-table-column type="selection" width="55px"></el-table-column>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="username" label="用户名"></el-table-column>
        <el-table-column prop="password" label="密码"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="money" label="money"></el-table-column>
        <el-table-column prop="createTime" label="创建日期"></el-table-column>
        <el-table-column
            prop="sex"
            label="性别"
            width="100px"
        >
          <!-- 这里的scope是指 是插槽，可以通过它获取当前行数据-->
          <template slot-scope="scope">
            <!-- scope.row就是当前行数据 -->
            <el-tag
                :type="scope.row.sex == '1' ? 'primary' : 'success'"
                disable-transitions>{{ scope.row.sex == '1' ? '男' : '女' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 设置两个按钮插槽，表示编辑和删除单个用户 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="pageSizes"
            :page-size="user.pageSize"
            :current-page="user.pageNum"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 添加一个跳转按钮 -->
        <el-button style="margin-right: 10px" size="small" type="primary" @click="toPage">跳转</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "User",
  data() {
    // 在这里定义自定义校验手机规则的方法
    // 有三个参数:rule,value,callback
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        const reg = /^\d{11}$/
        if (reg.test(value)) {
          callback();  // 放行
        } else {
          callback(new Error('手机号必须是11位'))
        }
      }
    }
    return {
      tableData: [],   // 是一个数组，里面存放的是一个个用户json数据
      editUserDialog: false,
      title: "添加用户",
      total: 0,   // 查询的总条数，对应user表中的总行数。
      pageSizes: [3, 6, 9, 12],   // 分页的页码,即每页3条，每页6条，每页9条等。
      multipleSelection:[],
      user: {
        username: '',
        password: '',
        phone: '',
        money: null,
        sex: null,
        createTime: '',
      },
      userDTO: {
        createTime1: null,
        createTime2: null,
        pageNum: 1,   // 起始页1
        pageSize: 3,  // 每页3条数据
        username: '',
        sex: '',
      },

      rules: {
        // 定义规则
        username: [
          {required: true, message: "请输入用户名", trigger: 'blur'},
          {min: 2, max: 10, message: "用户名长度必须在2-10个字符之间", trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
        ],
        phone: [
          // 这里电话校验是通过自定义校验方法来实现的
          {validator: validatePhone, trigger: 'blur'}
        ]

      },

    }
  },
  methods: {
    // 查询全部用户--第一版
    // findAll() {
    //   // 发送axios请求
    //   axios.get("/user/findAll").then((ret) => {
    //       console.log(ret.data)
    //     if (ret.code === 20000) {
    //       // 将从后端数据库查询出来的List集合数据进行赋值给tableList
    //       this.tableData = ret.data;
    //     }
    //   }).catch(() => {
    //     this.$message("查询失败");
    //   })
    // },

    // 分页查询--第二版
    // findAllByPage(){
    //   axios.get("/user/findAllByPage", {
    //     params:{
    //       pageNum:this.user.pageNum,
    //       pageSize:this.user.pageSize
    //     }
    //   }).then((ret)=>{
    //     if (ret.code === 20000){
    //       // 将后端返回的pageinfo数据赋值给tableData
    //       this.tableData = ret.data.list
    //       // 将总条数也进行返回，方便计算其他的分页信息
    //       this.user.total = ret.data.total;
    //     }
    //   }).catch(()=>{
    //     this.$message("分页查询失败!")
    //   })
    // },

    // // 第二版：分页跳转按钮事件
    // toPage(){
    //   // 当输入要跳转的页面number时，由于数据是双向绑定的，因此此时的pageNum就已经
    //   // 发生改变了，直接进行分页查询即可。
    //   this.findAllByPage()
    // },
    //
    // // 第二版：当页码改变时触发
    // handleSizeChange(val) {
    //   // 这里的参数val是指：最新的页面大小
    //   this.user.pageSize = val
    //   // 然后重新调用分页查询方法findAllByPage即可
    //   this.findAllByPage()
    // },
    //
    // // 第二版：当当前页改变时触发跳转
    // handleCurrentChange(val) {
    //   // 这里的参数val是指：要跳转到的页码值
    //   this.user.pageNum = val
    //   // 然后重新调用分页查询方法findAllByPage即可
    //   this.findAllByPage()
    // },

    // 分页查询+模糊搜索--第三版
    onSearch() {
      // 调用分页查询+模糊查询的方法
      this.findByLikeByPage();
    },

    // 第三版：模糊查询+分页的具体实现
    findByLikeByPage() {
      axios.get("/user/findAllByPage2", {
        params: this.userDTO
      }).then((ret) => {
        this.tableData = ret.data.list;
        this.total = ret.data.total;
      }).catch(() => {
        this.$message("模糊查询失败!")
      })
    },

    // 页面大小改变触发该函数,自动传入最新的页面大小val
    handleSizeChange(val) {
      this.userDTO.pageSize = val;
      this.findByLikeByPage()
    },

    // 当前页改变(下页,上页,跳页)自动触发,获得最新页码
    handleCurrentChange(val) {
      this.userDTO.pageNum = val
      this.findByLikeByPage()
    },

    // 第三版：跳转页码
    toPage() {
      this.findByLikeByPage()
    },

    // 第三版：重置userForm
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // 重置搜索框里的内容
    resetEditForm(formName) {
      this.editUserDialog = false;
      this.$refs[formName].resetFields();
    },

    // 实现添加用户和更新用户数据
    saveUser(formName) {
      this.$refs[formName].validate((valid)=>{
        if (valid){

          // 根据title判断是添加用户还是更新用户
          if (this.title === "添加用户"){
            axios.post("/user/addUser", this.user).then(ret =>{
              if (ret.code === 20000){
                this.$message.success("添加成功!");
                // 如果添加成功，则需要重新重新查询
                this.userDTO.pageNum = 1;
                this.findByLikeByPage();
                this.editUserDialog = false;
                this.user = {}; // 清空表单数据
              }
            }).catch(()=>{
              this.$message.error("添加失败!");
            })
          }else {
            // 此时执行更新逻辑
            axios.post("/user/updateUser", this.user).then(ret =>{
              if (ret.code === 20000){
                this.$message.success("更新成功!");
                this.userDTO.pageNum = 1;
                this.findByLikeByPage();
                this.resetEditForm(formName);
                this.editUserDialog = false;
              }
            }).catch(()=>{
              this.$message.error("更新失败!")
            })
          }
        }else{
          return false;
        }
      });
    },

    // 添加用户
    handleAddUser() {
      this.title = "添加用户";
      this.user = {};
      this.editUserDialog = true;
      this.$refs.userForm.resetFields();

    },

    // 点击编辑用户信息按钮事件
    handleEdit(index, row) {
      this.title = "更新用户";
      // 深拷贝对象并确保sex是数字类型
      this.user = {
        ...row,
        sex: Number(row.sex), // 确保是数字类型
        createTime: new Date(row.createTime) // 处理日期
      };
      this.editUserDialog = true;
    },

    // 点击删除单个用户事件
    handleDelete(index, row) {
      // 首先要进行弹框提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里的参数index指的是行号，不是用户的编号
        // row指的是当前行对象
        const uid = row.id;
        // 发请求，根据uid删除用户
        axios.get("/delete", {
          params: {
            id: uid
          }
        }).then((ret) => {
          if (ret.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!',
              duration: 1000
            })
            // 如果删除成功，则需要重新查询用户
            this.userDTO.pageNum = 1;
            this.findByLikeByPage()
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '删除失败',
            duration: 1000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 触发选择框的选中事件
    handleSelectionChange(val) {
      // 这里的val是指：复选框里的行对象，是一个数组
      this.multipleSelection = [];
      // 因此，需要遍历val数组，得到数组中对象的id属性值
      for (let i = 0; i < val.length; i++) {
        this.multipleSelection.push(val[i].id)
      }

    },

    // 批量删除用信息
    deleteBatch(){
      // 首先进行弹框提示
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发请求
        axios.get("/user/deleteBatch", {
          params:{
            ids:this.multipleSelection.join(",")   // 这里需要对集合进行格式化一下，将参数按照?ids=1,2,3,4这样传递
          }
        }).then((ret)=>{
          if (ret.code === 20000){
            this.$message({
              type:'success',
              message:'删除成功',
              duration:1000
            })
            // 如果删除成功后，需要重新查询用信息
            this.userDTO.pageNum = 1;
            this.findByLikeByPage();

          }
        }).catch(()=>{
          this.$message({
            type:'error',
            message:'删除失败',
            duration:1000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },



  },
  created() {
    // this.findAll()
    // this.findAllByPage()
    this.findByLikeByPage()

  }
}
</script>

<style>

</style>
